import { initOssClient, checkOssClient } from '@/utils/oss';

export default {
  data () {
    return {
      uploadLabel: '上传图片', // 上传图片文案
      disabled: false // 详情禁止编辑
    };
  },
  methods: {
    /**
     * 批量上传文件
     * 调用oss上传图片
     * 会将回显的url及新增的进行批量处理
     * @param files[]
     * @return {Promise<url[]>}
     */
    handleUploadFiles (files) {
      this.$toast.loading({
        message: '请稍等...',
        forbidClick: true,
        duration: 0
      });
      return Promise.all([
        ...files.map(item => item.url ? item.url : this.handleUploadToOSS(item))
      ]);
    },
    // 上传文件到oss
    async handleUploadToOSS (opt) {
      console.log(opt);
      // 获取文件后缀
      const tmp = opt.file.name.split('.');
      const extname = tmp.pop();
      const extList = ['jpg', 'jpeg', 'png', 'gif'];
      // 校验文件类型
      const isValid = extList.includes(extname);
      if (!isValid) {
        this.$notify({
          type: 'warning',
          message: '只支持上传 jpg、jpeg、png、gif 格式的图片'
        });
        return;
      }

      // 检查是否已有 Oss Client
      let client = checkOssClient();
      if (client === null) {
        try {
          const res = await this.$api.getOSSConfig();
          if (res.code === 0) {
            client = initOssClient(res.result);
          }
        } catch (error) {
          this.$notify({
            type: 'danger',
            message: `${error}`
          });
          return;
        }
      }

      // 生产随机文件名
      const randomName = Array(32)
        .fill(null)
        .map(() => Math.round(Math.random() * 16).toString(16))
        .join('');

      const path = `zcgl/h5/tmp-img/${randomName}.${extname}`;
      let url;
      try {
        // 使用 multipartUpload 正式上传到 oss
        const res = await client.multipartUpload(path, opt.file, {
          progress: async function (p) {
            // progress is generator
            // let e = {};
            // e.percent = p * 100;
            // // 上传进度条 vant 组件自带的方法
            // opt.onProgress(e);
          }
        });
        // 去除 oss 分片上传后返回所带的查询参数，否则访问会 403
        const ossPath = res.res.requestUrls[0].split('?')[0];
        // 替换协议，统一使用 'https://'，否则 Android 无法显示图片
        url = ossPath.replace('http://', 'https://');
      } catch (error) {
        this.$notify({
          type: 'danger',
          message: `${error}`
        });
      }
      return url;
    }
  }
};
